<template>
    <view class="cost-item">
        <view class="c-name" v-show="type == 2">
            {{ item.BName }}
        </view>
        <view class="c-name" v-show="type == 3">
            {{ item.EName }}
        </view>
        <view class="c-name" v-show="type == 4">
            {{ item.KName }}
        </view>
        <view class="c-name" v-show="type == 7">
            {{ item.PName }}
        </view>
        <view class="c-turnover">
            <view class="sum">¥{{ item.Total }}</view>
            <view class="total">{{ item.Qty }}</view>
        </view>
        <view class="c-profit">
            <view class="perc" v-if="item.MaoriProfit"> {{ (item.MaoriProfit * 100).toFixed(2) }}% </view>
            <view class="perc" v-else> {{ item.MaoriProfit }}% </view>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    props: {
        item: {
            type: Object,
            default: () => {},
        },
        type: {
            type: String / Number,
            default: 2,
        },
    },
    data() {
        return {}
    },
    mounted() {},
    onShow() {},
    methods: {},
}
</script>

<style lang="scss">
.cost-item {
    display: flex;
    border-bottom: #ebebeb solid 1px;
    padding: 32rpx 0;
    text-align: center;
    .c-name {
        flex: 1;
        text-align: left;
        padding-left: 24rpx;
        // padding-right: 24rpx;
        font-size: $size-28;
    }
    .c-turnover {
        width: 220rpx;
        .sum {
            font-size: $size-28;
        }
        .total {
            font-size: $size-24;
            color: $color-gray-3;
        }
    }
    .c-profit {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180rpx;
        .perc {
            width: 136rpx;
            height: 46rpx;
            line-height: 46rpx;
            font-size: $size-28;
            background: #fff7eb;
            color: #ef9604;
        }
    }
}
.c-yellow {
    color: $color-yellow-1;
}
</style>
